<!--
 * @Author: gaotang
 * @Date: 2025年01月03日
 * @Email: qq23745038@126.com
 * @LastEditors: gaotang
 * @LastEditTime: 2025-01-03 18:54:52
-->
<template>
  <div class="page-box">
    <div v-if="pageflag" class="chart-container">
      <Echart v-if="pageflag" :options="options" class="left_center_inner" ref="charts" height="300px" />
      <!-- 底座背景 -->
      <div class="bg"></div>
    </div>
    <!-- <div  v-if="pageflag" class="box">
      <div class="boxView" v-for="(item, index) in tableData" :key="index" :class="'boxPosition'+index">
        <div class="boxIcon" @click="showChatFun(index)"></div>
        <div class="boxTitle">加油站</div>
        <div class="boxBlue" v-if="showIcon==index"  @mouseleave="showIcon='8'">
          <div class="boxBlue-line">名称：加油站001</div>
          <div class="boxBlue-line">位置：通达路路口</div>
          <div class="boxBlue-line">所属公司：中国石化</div>
        </div>
      </div>
    </div> -->
    <Reacquire v-else @onclick="getData" style="line-height: 300px">
      重新获取
    </Reacquire>
  </div>

</template>

<script>
import { colorsA, colorsB, legend, xAxis, yAxis } from '@/config/EChartVar';
import { graphic } from 'echarts';
import { getPie3D, getParametricEquation } from '@/utils/chart'; //工具类js，页面路径自己修改

export default {
  name: 'ARightLeftTop',
  data() {
    return {
      pageflag: true,
      timer: null,
      showIcon: 8,
      tableData: [{}, {}, {}],
      options: {},
      optionData: [
        {
          name: '中石化',
          value: 28,
          itemStyle: {
            color: '#239598',
          },
        },
        {
          name: '中石油',
          value: 28,
          itemStyle: {
            color: '#EE782D',
          },
        },
        {
          name: '山东石化',
          value: 14,
          itemStyle: {
            color: '#8DCEF1',
          },
        },
        {
          name: '海湾石化',
          value: 36,
          itemStyle: {
            color: '#6DCDE6',
          },
        },
        {
          name: '武警石化',
          value: 22,
          itemStyle: {
            color: '#235FAC',
          },
        },
      ],
    };
  },
  created() {
    this.getData();
  },
  mounted() { },
  beforeDestroy() {
    this.clearData();
  },
  methods: {
    clearData() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    getData() {
      this.init(this.optionData)
      this.pageflag = true;
    },
    showChatFun(index) {
      this.showIcon = index
    },
    init(currentData) {
      let legend = {
        // orient: "horizontal",
        bottom: '0px',
        left: 'center',
        width: '80%',
        itemGap: 3,
        formatter: function (param) {
          return param;
        },
      };
      // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
      const options = getPie3D(this.optionData, 0.9, 190, 25, 12, 0.9, legend);
      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
      options.series.push({
        name: '加油油品', //自己根据场景修改
        backgroundColor: 'transparent',
        type: 'pie',
        label: {
          // show: true,
          opacity: 1,
          fontSize: 13,
          lineHeight: 20,
          // normal: {
          show: true,
          formatter: '{d}%' // 自定义标签格式，{b} 表示名称，{d} 表示数据值
          // }
        },
        startAngle: -8, // 起始角度，支持范围[0, 360]。
        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
        radius: ['20%', '45%'],
        center: ['50%', '50%'],
        data: this.optionData,
        itemStyle: {
          opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
        },
      });
      // options.series.push({
      //   name: '货物品类占比', //自己根据场景修改
      //   backgroundColor: 'transparent',
      //   type: 'pie',
      //   label: {
      //     show: true,
      //     opacity: 1,
      //     fontSize: 13,
      //     lineHeight: 20,
      //   },
      //   startAngle: -40, // 起始角度，支持范围[0, 360]。
      //   clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
      //   radius: ['20%', '50%'],
      //   // center: ['50%', '50%'],
      //   data: this.optionData,
      //   itemStyle: {
      //     opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
      //   },
      // });

      this.options = options;
    },
  },
};
</script>
<style lang="scss" scoped>
.page-box {
  position: relative;
  width: 100%;
  height: 100%;

  .left_center_inner,
  .bg {
    margin-left: -10px;
    width: 100%;
    height: 100%;
  }

  .left_center_inner {
    top: -50px;
    z-index: 1;
  }

  .bg {
    position: absolute;
    bottom: 80px;
    left: 52%;
    // z-index: -1;
    width: 290px;
    height: 185px;
    background: no-repeat center;
    background-image: url('../../../assets/img/launch/pie_bg.png');
    background-size: 100% 100%;
    transform: translateX(-50%);
  }
}
</style>
